<template>
  <div>
    <el-container>
      <el-header  class="homeHeader">
        <div class="title">微人事</div>
        <!--class="userInfo" 设置移动到位置显示的是手指 -->
<!--修改以前的内容  添加一个聊天的按钮 -->
          <div>
<!--              聊天内容 -->
              <el-button icon="el-icon-bell" type="text" style="margin-right: 8px;color: #000000;" size="normal" @click="goChat"></el-button>
              <!-- 导航栏-->
              <el-dropdown class="userInfo" @command="commandHandler">  <!--@command="commandHandler" 点击菜单项触发的事件回调-->
                  <span class="el-dropdown-link">
              {{user.name}}<i><img :src="user.userface" alt=""></i>
                      <!--:src="user.userface"使用后台传递过来的图片-->
            </span>
                  <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item  command="userInfo">个人中心</el-dropdown-item>
                      <el-dropdown-item  command="setting">设置</el-dropdown-item>
                      <!--disabled:禁用的    divided:有分隔线 command 触发点击事件 -->
                      <el-dropdown-item  command="logout"  divided>注销登录</el-dropdown-item>
                  </el-dropdown-menu>
              </el-dropdown>

          </div>





      </el-header>
     <!--左侧栏  NavMenu 导航菜单-->
      <el-container>
        <el-aside width="200px">
         <!-- <el-menu @select="menuClick" > --><!--menuClick 左侧菜单点击事件-->
            <el-menu router unique-opened>   <!--是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转	可以替换掉点击事件-->
                <!-- v-for="(item,index) in  this.$router.options.routes" v-if="!item.hidden"-->
                <!--routes指的是computed 下的  :index="index"和unique-opened来控制打开一个菜单  -->
            <el-submenu :index="index+''"
                        v-for="(item,index) in routes" v-if="!item.hidden"
                        :key="index">
              <!--this.$router.options.routes 得到路由菜单的所有的路径  v-if="!item.hidden" 判断hidden的标识 如果为假则展示-->
              <template slot="title">
                <i style="color: #409eff; margin-right: 5px;" :class="item.iconcls"></i><!--class="el-icon-location" 栏目样式-->
                <span>{{item.name}} </span>
              </template>
                <el-menu-item :index="child.path"
                              v-for="(child,indexj) in item.children" :key="indexj">{{child.name}}
                </el-menu-item>
            <!--v-for="(child,indexj) in item.children">{{child.name}} 遍历子菜单的值-->
            </el-submenu>
          </el-menu>
        </el-aside>

        <el-main>
            <!--面包屑 导航栏-->
          <el-breadcrumb separator-class="el-icon-arrow-right"
                         v-if="this.$router.currentRoute.path!='/home'">
              <!--v-if="this.$router.currentRoute.path!='/home'" 如果点击首页 不显示当行栏-->
                 <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>{{this.$router.currentRoute.name}}</el-breadcrumb-item>
                <!--{{this.$router.currentRoute.name}}  得到当前菜单的路径 -->
            </el-breadcrumb>
               <!--首页显示的内容 -->
            <div class="homeWelcome" v-if="this.$router.currentRoute.path=='/home'">
                欢迎来到微人事！
            </div>
<!--class="homeRouterView"  设置导航栏与下边内容的间隔 -->
          <router-view class="homeRouterView"/>
        </el-main>

      </el-container>
    </el-container>
  </div>
</template>

<script>

import {getRequest} from "../utils/api";

export default {
  name: 'home',
  data(){
    return {
      user:JSON.parse(window.sessionStorage.getItem("user")),
      //从sessionstorage中得到缓存的东西  把字符串转换成对象  最终得到一个对象来使用
       }
    },
    computed:{
        routes(){
            //拿到store里面的routes数据
            return this.$store.state.routes;
        }
    },
     methods:{
          //跳转到聊天
         goChat() {
             this.$router.push("/chat");
         },
      //methods和data 平级
      // menuClick(index,indexPath){
          //index: 选中菜单项的 index, indexPath: 选中菜单项的 index path
        // console.info(index,indexPath); // index的内容 1-4-1  indexpath的内容是['1', '1-4-1']
        // this.$router.push(index); //index表示跳转路径
       //},
       commandHandler(cmd) {  //点击事件出发的方法
         if(cmd=='logout'){  //如果是注销的话。
                   console.info("logout....");
                   this.$confirm('此操作将注销登录, 是否继续?', '提示', {
                     confirmButtonText: '确定',
                     cancelButtonText: '取消',
                     type: 'warning'
                   }).then(() => {
                     //注销登录  移除sessionstorage 跳转到登录页面
                     this.getRequest("/logut");
                     window.sessionStorage.removeItem("user");
                     this.$router.replace("/");
                    this.$store.commit('initRoutes',[]);//初始化菜单的数据为空
                    // this.$message({
                      // type: 'success',
                       //message: '删除成功!'
                    // });
                   }).catch(() => {
                     this.$message({
                       type: 'info',
                       message: '已取消删除'
                     });
                   });

             }
       }
    }
  }

</script>

<style>
.homeRouterView{
  margin-top: 10px;
}
.homeWelcome{
  text-align: center;
  font-size: 30px;
  font-family: 华文行楷;
  color: #409eff;
  padding-top: 50px;
}
.homeHeader{
  background-color:#409eff;
  display: flex;
  align-items: center; /*竖轴上居中*/
  justify-content:space-between; /*空白的地方在中间*/
  padding: 0 15px;
  box-sizing: border-box;
}
/* 字体样式 */
.homeHeader .title{
  font-size: 30px;
  font-family: 华文行楷;
  color: #ffffff;
}
/*设置鼠标移上去显示为手指*/
.userInfo{
  cursor: pointer;
}
/* 头像样式 */
.el-dropdown-link img{
  width: 48px;
  height: 48px;
  border-radius: 24px;
  margin-left: 8px;
}
/* 用户名样式 */
.el-dropdown-link{
  display: flex;
  align-items: center;
}

</style>
